<template>
  <div>
    <div class="aaa" id="customerChart"></div>
  </div>
</template>

<script>
export default {
  name: "data_page",
  mounted() {
    this.$nextTick(() => {
      this.drawRYLFPie()
    })
    addEventListener("resize", () => {
      this.drawRYLFPie()
    })
  },
  methods: {
    drawRYLFPie() {
      let myChart = this.$echarts.getInstanceByDom(
        document.getElementById("customerChart")
      )
      if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = this.$echarts.init(document.getElementById("customerChart"))
      }
      let chartData = [
        {
          name: "xxx事项",
          value: 245
        }
      ]
      let option = {
        backgroundColor: "#1c2879",
        xAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: { show: false },
          axisLine: {
            show: false
          }
        },
        grid: {
          top: 0,
          bottom: 0,
          left: "5%"
        },
        yAxis: {
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              padding: [-15, 0, 35, 18]
            },
            formatter(value, index) {
              let str = "",
                num = "TOP" + (index + 1)
              if (index === 0) {
                str = "{a| " + num + "}{title| " + value + "}"
              } else if (index === 1) {
                str = "{b| " + num + "}{title| " + value + "}"
              } else if (index === 2) {
                str = "{c| " + num + "}{title| " + value + "}"
              } else {
                str = "{d| " + num + "}{title| " + value + "}"
              }
              return str
            },
            rich: {
              a: {
                borderColor: "#EE6F7C",
                borderWidth: 1,
                borderRadius: [0, 10, 10, 0],
                padding: [3.5, 10, 1, -13],
                backgroundColor: "rgba(238, 111, 124, 0.8)"
              },
              b: {
                borderColor: "#FFCF5F",
                borderWidth: 1,
                borderRadius: [0, 10, 10, 0],
                padding: [3.5, 10, 1, -13],
                backgroundColor: "rgba(255, 207, 95, 0.7)"
              },
              c: {
                borderColor: "#00E8FF",
                borderWidth: 1,
                borderRadius: [0, 10, 10, 0],
                padding: [3.5, 10, 1, -13],
                backgroundColor: "rgba(0, 232, 255, 0.7)"
              },
              d: {
                borderColor: "#1A90FF",
                borderWidth: 1,
                borderRadius: [0, 10, 10, 0],
                padding: [3.5, 10, 1, -13],
                backgroundColor: "rgba(26, 144, 255, 0.7)"
              },
              title: {
                padding: [0, 0, 0, 3]
              }
            },
            align: "left"
          },
          data: chartData.map((item) => item.name)
        },
        series: [
          {
            type: "pictorialBar",
            symbol: "rect",
            symbolRotate: 30,
            symbolRepeat: "fixed",
            symbolClip: true,
            symbolOffset: [0, -1.5],
            symbolSize: [2, 12],
            symbolMargin: "3",
            itemStyle: {
              normal: {
                color: "#000726"
              }
            },
            label: {
              show: true,
              color: "#fff",
              fontFamily: "Bebas",
              fontSize: 12,
              offset: [-9, -1.5],
              position: "right",
              formatter(params) {
                let result = ""
                switch (params.dataIndex) {
                  case 0:
                    result = "{img|}{index0|" + params.value + "}{unit|件}"
                    break
                  case 1:
                    result = "{img|}{index1|" + params.value + "}{unit|件}"
                    break
                  case 2:
                    result = "{img|}{index2|" + params.value + "}{unit|件}"
                    break
                  default:
                    result = "{img|}{index3|" + params.value + "}{unit|件}"
                    break
                }
                return result
              },
              rich: {
                img: {
                  height: 18,
                  width: 20
                  // backgroundColor: { image: arrow },这个图片自己切，这里上传不了（加了一个尾巴的形状）
                },
                unit: {
                  color: "#fff",
                  fontSize: 11
                },
                index0: {
                  color: "#ee6f7c",
                  fontFamily: "Bebas",
                  padding: [-2, 2, 0, 0]
                },
                index1: {
                  color: "#ffcf5f",
                  fontFamily: "Bebas",
                  padding: [-2, 2, 0, 0]
                },
                index2: {
                  color: "#00e8ff",
                  fontFamily: "Bebas",
                  padding: [-2, 2, 0, 0]
                },
                index3: {
                  color: "#fff",
                  fontFamily: "Bebas",
                  padding: [-2, 2, 0, 0]
                }
              }
            },
            symbolBoundingData:
              Math.max(...chartData.map((item) => item.value)) * 1.3,
            data: chartData.map((item) => item.value),
            z: 2
          },
          {
            type: "bar",
            barWidth: 10,
            data: chartData.map((item) => item.value),
            itemStyle: {
              normal: {
                color: "#00F7F0"
              }
            },
            z: 1
          },
          {
            type: "bar",
            barGap: "-125%", // 设置外框粗细
            data: chartData.map(
              (items) => Math.max(...chartData.map((item) => item.value)) * 1.3
            ),
            barWidth: 15,
            itemStyle: {
              color: "none",
              borderColor: "rgba(64, 245, 245, 0.5)"
            },
            z: 0
          }
        ]
      }

      myChart.setOption(option)
      setTimeout(() => {
        myChart.resize()
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.aaa {
  width: 500px;
  height: 500px;
  // background-color: red;
}
</style>
